<template>
    <a-row>
        <a-row class='mytitle'>
            <div style="cursor: pointer;" @click="handleNavigate">
                <a-icon type="left" />
                {{ $t('快照配置') + '(' + path + ')' }}
            </div>
        </a-row>

        <NoAuthPage v-showNoAuth="'D13-1'" :imgBoxStyle="{ height: '40vh', margin: '0 10px 10px' }" />
        <a-row v-userAuth="'D13-1'" style="margin:1em">
            <a-card hoverable>
                <a-button v-userAuth="'D13-2'" type='primary' @click="handleCreate">
                    <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>
                    {{ $t('创建快照') }}
                </a-button>

                <a-table style="margin-top: 16px;" class='tabstyle' :columns="columns" :loading="loading"
                    :dataSource="dataList" size="small" rowKey='name' :pagination='pagination' :locale="defaultSetting">
                    <template slot="operate" slot-scope="text, record">
                        <a-tooltip placement='top'>
                            <template slot='title'>
                                <span>{{ $t('Edit') }}</span>
                            </template>
                            <Iconfont v-userAuth="'D13-3'" class="icon table-operation-icon" type="icon-edit16f" @click="handleEdit(record)"></Iconfont>
                        </a-tooltip>
                        <a-tooltip placement='top'>
                            <template slot='title'>
                                <span>{{ $t('Delete') }}</span>
                            </template>
                            <Iconfont v-userAuth="'D13-4'" class="icon table-operation-icon" type="icon-delete16f" @click="handleDelete(record)">
                            </Iconfont>
                        </a-tooltip>
                    </template>
                </a-table>

            </a-card>
        </a-row>

        <createSnapshot ref="createRef" @get-list="getList" />
        <modifySnapshot ref="modifyRef" @get-list="getList" />

    </a-row>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import createSnapshot from './createSnapshot.vue'
import modifySnapshot from './modifySnapshot.vue'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name: 'snapshotConfig',
    components: { EmptyData, createSnapshot, modifySnapshot, NoAuthPage },
    data() {
        return {
            path: '',
            loading: false,
            columns: [
                { title: this.$t('快照名'), dataIndex: 'name', key: 'name' },
                { title: this.$t('创建时间'), dataIndex: 'created', key: 'created' },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 200 }
            ],
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onShowSizeChange: (current, pageSize) => { this.pageSize = pageSize; },
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`,
            },
            dataList: [],
            defaultSetting: { emptyText: <EmptyData /> },
        }
    },
    mounted() {
        this.path = this.$route.query.name
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.directory.getSnapListApi({ path: this.path })
            this.dataList = data
            this.loading = false
        },
        handleCreate() {
            this.$refs.createRef.isShow = true
            this.$refs.createRef.form.path = this.path
        },
        handleEdit(item) {
            this.$refs.modifyRef.isShow = true
            this.$refs.modifyRef.form = { ...item }
            this.$refs.modifyRef.form.path = this.path
            this.$refs.modifyRef.form.old_name = item.name
        },
        handleDelete(item) {
            let _this = this
            const { path, name } = item
            this.$confirm({
                title: this.$t('删除文件快照'),
                content: this.$t('删除文件快照名为') + `${name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.directory.deleteSnapListApi({ path, name })
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        _this.getList()
                    }
                },
                onCancel() {

                }
            })
        },
        handleNavigate() {
            this.$router.push({ path: '/fsview' })
        },
    }
}
</script>